<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酒店详情</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.min.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				position: relative;
				line-height: 1;
				color: #333;
			}
			
			.right-icon {
				position: absolute;
				right: 1.2rem;
				font-size: 0;
			}
			
			.background {
				display: inline-block;
				width: 3.6rem;
				height: 3.6rem;
				line-height: 3.6rem;
				text-align: center;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 50%;
			}
			
			.not-background {
				background-color: transparent;
			}
			
			.mui-bar .mui-icon {
				padding-top: 0;
				padding-bottom: 0;
				color: #fff;
			}
			/* 渐变头部导航--开始 */
			
			.mui-title {
				font-weight: normal;
				line-height: 3.6rem;
				text-align: left;
				padding-left: 2rem;
				background-color: transparent;
			}
			
			.mui-bar-transparent {
				height: 6.4rem;
				padding-top: 2rem;
				top: 0;
				background-color: rgba(247, 247, 247, 0);
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-bar .mui-pull-left .mui-icon {
				padding-right: 0.5rem;
				font-size: 2.8rem;
			}
			
			.mui-bar .mui-btn {
				font-weight: normal;
				font-size: 1.7rem;
			}
			
			.mui-bar .mui-btn-link {
				top: 1px;
			}
			/* 渐变头部导航--结束 */
			
			.hotel-title {
				position: absolute;
				width: 100%;
				bottom: 1.5rem;
				padding: 0 1.2rem;
			}
			
			.hotel-title h1 {
				float: left;
				line-height: inherit;
				font-size: 1.8rem;
				color: #fff;
				font-weight: normal;
				background-color: transparent;
				margin: 0;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.hotel-title span {
				float: right;
				width: 3.3rem;
				height: 1.5rem;
				line-height: 1.5rem;
				font-size: 1rem;
				color: #fff;
				text-align: center;
				margin-top: 0.2rem;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 1rem;
			}
			
			.background img {
				vertical-align: middle;
			}
			
			.hotel-img {
				position: relative;
				width: 100%;
				height: 21.6rem;
			}
			
			.hotel-img img {
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
			
			.hotel-type {
				position: absolute;
				bottom: 0.2rem;
				left: 50%;
				margin-left: -2rem;
				font-size: 1rem;
			}
			
			.mui-content {
				background-color: #f0f0f0;
			}
			
			.mui-bottom {
				display: none;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.mui-table-view {
				position: relative;
				background-color: #fff;
				font-size: 1.4rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				background-color: transparent;
			}
			
			.mui-table-view-cell {
				position: relative;
				padding: 1.2rem 1.8rem 1.2rem 1.2rem;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				font-size: 1.4rem;
			}
			
			.mui-table-view-cell:after {
				left: 1.2rem;
				background-color: #ccc;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				margin: -12px -18px -12px -12px;
			}
			
			.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-input-group {
				margin: -12px -18px -8px -12px;
			}
			
			.mui-table-view-cell.mui-collapse .mui-collapse-content {
				padding: 12px 18px 12px 12px;
				margin: 12px -18px -16px -12px;
			}
			
			.mui-input-group:after {
				height: 0;
			}
			
			.mui-table-view-cell__bd {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			
			.date-wrap {
				font-size: 0;
				text-align: center;
			}
			
			.date-item {
				font-size: 1.4rem;
			}
			
			.date-stay {
				font-size: 1.2rem;
				display: inline-block;
				width: 6rem;
				height: 1.8rem;
				line-height: 1.6rem;
				text-align: center;
				border: 1px solid #e61874;
				border-radius: 1.8rem;
				margin: 0 2.1rem;
			}
			
			.desc {
				position: relative;
				display: flex;
				background-color: #fff;
				margin-bottom: 1.2rem;
				height: 10.5rem;
			}
			
			.comment {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			
			.score span {
				color: #e61874;
			}
			
			.score-item {
				font-size: 0;
				padding-bottom: 0.6rem;
			}
			
			.rate {
				padding-top: 1.5rem;
			}
			
			.rate span,
			.rate a {
				font-size: 1rem;
				color: #666;
			}
			
			.map {
				position: relative;
				width: 75%;
				height: 10.5rem;
			}
			
			.map img {
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
			
			.cur-local {
				position: absolute;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				top: 0;
				right: 0;
				width: 100%;
				padding: 0.6rem;
				background-color: rgba(255, 255, 255, 0.8);
			}
			
			.cur-local span {
				font-size: 1.2rem;
				color: #666;
				line-height: initial;
				overflow: hidden;
				text-overflow: ellipsis;
				/*white-space: nowrap;*/
				-webkit-line-clamp: 1;
			}
			
			.cur-local img {
				width: 1.6rem;
				margin-right: 0.6rem;
			}
			
			.font-right {
				font-size: 1.4rem;
				margin-right: 3rem;
				color: #999;
			}
			
			.sex {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
			}
			
			.sex div {
				position: relative;
				font-size: 1.6rem;
				padding: 1.5rem 0 1.5rem 0;
			}
			
			.sex div:after {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				height: 0.2rem;
				content: '';
				background-color: #e61874;
				border-radius: 0.2rem;
			}
			
			.sex img {
				width: 1.4rem;
				margin-right: 0.9rem;
				vertical-align: middle;
			}
			
			.font10 {
				font-size: 1rem;
			}
			
			.font12 {
				color: #666;
				font-size: 1.2rem;
			}
			
			.font14 {
				color: #333;
				font-size: 1.4rem;
			}
			
			.font16 {
				font-size: 1.6rem;
			}
			
			.font24 {
				font-size: 2.4rem;
			}
			
			.column {
				display: flex;
				flex-direction: column;
			}
			
			.flex {
				display: flex;
			}
			
			.hotel-list {
				display: flex;
				align-items: center;
				height: auto;
			}
			
			.hotel-list-img {
				font-size: 0;
				margin-right: 0.9rem;
			}
			
			.hotel-list-img img {
				width: 8rem;
				border-radius: 0.4rem;
			}
			
			.info-title {
				font-size: 1.6rem;
				font-weight: normal;
				padding-bottom: 1.2rem;
				margin: 0;
			}
			
			.bed-size {
				padding-bottom: 0.6rem;
			}
			
			.hotel-list-price {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
			}
			
			.hotel-list-price span {
				display: flex;
				align-items: flex-end;
				color: #e61874;
			}
			
			.hotel-list-price .start {
				font-size: 1.2rem;
				color: #666;
			}
			
			.hotel-list-price img {
				width: 1.6rem;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #fff;
			}
			
			.mui-table-view-cell.mui-collapse.mui-active {
				margin-top: 0;
			}
			
			.sevice {
				margin-bottom: 1.2rem;
			}
			
			.facility {
				align-items: center;
			}
			
			.facility img {
				width: 2rem;
			}
			
			.facility span {
				color: #666;
				font-size: 1rem;
				padding-top: 0.6rem;
			}
			
			.mui-table-view-cell__item {
				display: flex;
				justify-content: space-around;
				flex: 1;
			}
			
			.icon {
				text-align: right;
			}
			
			.icon-img {
				width: 4.6rem;
				vertical-align: middle;
			}
			
			.hotel-list__child {
				padding: 0;
				margin-right: -0.3rem;
				background-color: #f0f0f0;
			}
			
			.hotel-item {
				padding: 2.7rem 1.8rem 3rem 2.4rem;
			}
			
			.price-wrap {
				align-items: flex-end;
				margin-right: 1.5rem;
			}
			
			.price-item {
				font-size: 0;
				color: #e61874;
				padding-bottom: 0.9rem;
			}
			
			.item-bed {
				font-size: 1.6rem;
				color: #333;
				padding-bottom: 0.9rem;
			}
			
			.item-breakfast {
				font-size: 1.2rem;
				color: #333;
			}
			
			.look-more {
				background-color: #f2f2f2;
			}
			
			.look-more div {
				width: 100%;
				color: #666;
				font-size: 1.2rem;
				text-align: center;
			}
			/* 弹出框--开始 */
			
			.mui-plus .mui-bar-nav~.mui-content {
				padding: 0!important;
			}
			
			.mui-plus .plus {
				display: inline;
			}
			
			.plus {
				display: none;
			}
			
			.mui-popover {
				height: 33rem;
				background-color: #fff;
			}
			
			.mui-popover .mui-scroll-wrapper {
				margin: 1.5rem 0 0;
			}
			
			ul,
			li {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			
			.pop-type {
				font-size: 1.6rem;
				color: #333;
				font-weight: normal;
				padding-left: 1.5rem;
				padding-bottom: 1.2rem;
				margin: 0;
			}
			
			.popover-wrap {
				padding: 0 2.7rem 0 0.9rem;
			}
			
			.popover-wrap li {
				display: flex;
				align-items: center;
			}
			
			.pop-bed {
				padding-bottom: 2.1rem;
			}
			
			.pop-deploy ul {
				width: 100%;
				font-size: 0
			}
			
			.pop-deploy,
			.pop-oversea {
				padding-bottom: 2.1rem;
			}
			
			.pop-wifi {
				padding-bottom: 1.5rem;
			}
			
			.pop-wifi div,
			.pop-floor div {
				width: 33%;
			}
			
			.pop-wifi div:last-child,
			.pop-floor div:last-child {
				padding-right: 0;
			}
			
			.pop-wifi div span,
			.pop-floor div span {
				font-size: 1rem;
			}
			
			.pop-icon {
				vertical-align: bottom;
			}
			
			.pop-item {
				font-size: 1.2rem;
				color: #666;
				padding-left: 0.3rem;
			}
			
			.pop-cancel {
				padding-bottom: 2.1rem;
			}
			
			.pop-cancel .title,
			.pop-oversea .title {
				font-size: 1rem;
				color: #333;
				width: 20%;
			}
			
			.pop-cancel .content,
			.pop-oversea .content {
				line-height: 1.6rem;
				font-size: 1.2rem;
				color: #666;
				width: 80%;
				padding-left: 3rem;
			}
			
			.pop-recommend {
				justify-content: space-between;
				padding-bottom: 2.1rem;
			}
			
			.pop-recommend .title {
				font-size: 1.2rem;
				color: #333;
				width: 20%;
			}
			
			.pop-recommend .content {
				font-size: 1.2rem;
				color: #666;
			}
			
			.pop-foot {
				width: 100%;
				height: 4.5rem;
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items: center;
				bottom: 0;
				left: 0;
				z-index: 100;
				background-color: #fff;
				border-top: 1px solid #e0e0e0;
			}
			
			.pop-price {
				display: flex;
				flex-direction: column;
				font-size: 1.2rem;
				color: #E61874;
				padding: 0.9rem 0 0.9rem 0.9rem;
			}
			
			.price-fan {
				font-size: 1rem;
				color: #666;
				padding-top: 0.6rem;
			}
			
			.submit {
				width: 13.8rem;
				line-height: 4.5rem;
				text-align: center;
				font-size: 1.8rem;
				color: #fff;
				background-color: #e61874;
			}
			/* 弹出框--结束 */
		</style>
	</head>

	<body>
		<!-- 渐变头部导航--开始 -->
		<header id="header" class="mui-bar mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left background"></a>
			<div class="right-icon">
				<a class="background collect" style="margin-right: 1.5rem;">
					<img width="20" src="../styles/images/detail/icon_collection_white.png@2x.png" />
				</a>
				<a class="background telephone" href="">
					<img width="17" src="../styles/images/detail/icon_phone_white.png@2x.png" />
				</a>
			</div>
		</header>

		<header id="header2" class="mui-bar mui-bar-transparent" style="display: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="padding-top: 0.6rem;padding-left: 0.6rem;color: #e61874;"></a>
			<h1 class="mui-title" id="top-title" style="display: none;">深圳雅商会馆高档型</h1>
			<div class="right-icon">
				<a class="background not-background collect" style="margin-right: 1.5rem;">
					<img width="20" src="../styles/images/detail/icon_collection_red.png@2x.png" />
				</a>
				<a class="background not-background telephone" href="">
					<img width="17" src="../styles/images/detail/icon_phone_red.png@2x.png" />
				</a>
			</div>
		</header>
		<!-- 渐变头部导航--结束 -->

		<!-- 酒店房间展示图--开始 -->
		<div id="mui-content" class="mui-content">
			<div class="hotel-img" id="hotel-img">
				<img id="head-img" src="../styles/images/1.jpg" />
				<div class="hotel-title">
					<h1 class="con-title">深圳雅商会馆高档型</h1>
					<span id="picNum">5张</span>
				</div>
			</div>

			<!-- 酒店评分描述 -->
			<div class="desc">
				<div class="comment">
					<div id="score" class="score column">
						<div class="score-item">
							<span class="font24">4.4</span>
							<span class="font16">分</span>
						</div>
						<span class="font14">非常棒</span>
					</div>
					<div class="rate column">
						<span class="font10" style="padding-bottom: 0.3rem;">98%好评</span>
						<a class="font10" data-url="./hotel-comment.html">81条评论 ></a>
					</div>
				</div>

				<!-- 酒店导航地图 -->
				<div class="map">
					<img src="../styles/images/map.jpg" />
					<div class="cur-local">
						<img src="../styles/images/detail/address-icon.png" />
						<span id="address">深圳南山区软件产业基地（学府路）软件产业基地B2栋720室，南山中心区|科技园，距您：0.3公里</span>
					</div>
				</div>
			</div>

			<!-- 酒店情趣特色 -->
			<div class="sex">
				<div>
					<img src="../styles/images/detail/icon_features.png@2x.png" /> 情趣特色 /
					<span style="color: #e61874;">激情火辣圣地</span>
				</div>
			</div>

			<!-- 入住与离店时间 -->
			<ul id="sAlTime" class="mui-table-view">
				<li id="openCalendar" class="mui-table-view-cell flex" style="padding: 1.5rem 0;">
					<div id="date-wrap" class="mui-table-view-cell__bd date-wrap">
						<span class="date-item"><span class="font10">入住</span id="startTime">&nbsp;-&nbsp;<span>4月7日</span></span>
						<span class="date-stay">共1晚</span>
						<span class="date-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span id="endTime">4月8日</span></span>
					</div>
				</li>
			</ul>

			<!-- 房间类型 -->
			<div id="room-type">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">
							<div class="hotel-list">
								<div class="hotel-list-img">
									<img src="../styles/images/avatar-icon1.png" />
								</div>
								<div class="mui-table-view-cell__bd">
									<h1 class="info-title">双人大床房</h1>
									<div class="font12 bed-size">22㎡&nbsp;&nbsp;大床1.5米</div>
									<div class="font12">免费wifi&nbsp;&nbsp;免费无线</div>
								</div>
							</div>
						</a>

						<!-- 该类型下的可选优惠房 -->
						<div class="mui-collapse-content">
							<div class="mui-input-group">
								<ul class="hotel-list__child">
									<li id="hotel-item" class="mui-table-view-cell flex hotel-item">
										<div class="mui-table-view-cell__bd">
											<a href="#middlePopover" class="column">
												<span class="item-bed">浪漫大床房</span>
												<span class="item-breakfast">含单早</span>
											</a>
										</div>
										<div class="column price-wrap">
											<span class="price-item"><span class="font10">￥</span><span class="price" style="font-size: 1.4rem;">222</span></span>
											<span class="font10">立减￥<span class="cashback">22</span></span>
										</div>
										<img class="icon-img on-icon" src="../styles/images/detail/btn_booking_projection.png@2x.png" />
									</li>
								</ul>
							</div>
						</div>
					</li>
				</ul>
			</div>

			<!-- 酒店设施 -->
			<ul id="hotel-introduce" class="mui-table-view sevice">
				<li class="mui-table-view-cell flex" data-url="./hotel-introduce.html">
					<div class="mui-table-view-cell__item">
						<div class="facility column">
							<img width="20" class="facility column" src="../styles/images/detail/icon_wifi.png@2x.png">
							<!--<img src="../styles/images/wifi.png" />-->
							<span>房间wifi</span>
						</div>
						<div class="facility column">
							<img width="20" class="facility column" src="../styles/images/detail/icon_interest.png@2x.png">
							<!--<img src="../styles/images/sex.png" />-->
							<span>情趣用品</span>
						</div>
						<div class="facility column">
							<img width="20" class="facility column" src="../styles/images/detail/icon_parking.png@2x.png">
							<!--<img src="../styles/images/stop.png" />-->
							<span>停车场</span>
						</div>
						<div class="facility column">
							<img width="20" class="facility column" src="../styles/images/detail/icon_air-condition.png@2x.png">
							<!--<img src="../styles/images/air.png" />-->
							<span>空调</span>
						</div>
					</div>
					<a class="mui-navigate-right">
						<span class="font-right" style="color: inherit;">详情</span>
					</a>
				</li>
			</ul>
		</div>
		<!-- 酒店房间展示图--结束 -->
		<!-- 含早弹出框--开始 -->
		<div id="middlePopover" class="mui-popover" style="left: 0 !important;right: 0;bottom: 10rem;margin: auto;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<h1 class="pop-type">大床房</h1>
					<ul class="popover-wrap">
						<li class="pop-bed">
							<img width="12" class="pop-icon" src="../styles/images/detail/bed.png" />
							<span class="pop-item">大床1.8m | 建筑面积40㎡</span>
						</li>
						<li class="pop-deploy">
							<ul>
								<li class="pop-wifi">
									<div class="">
										<img width="12" class="pop-icon" src="../styles/images/detail/wifi.png" />
										<span class="pop-item">有wifi</span>
									</div>
									<div class="">
										<img width="12" class="pop-icon" src="../styles/images/detail/icon_bathroom.png@2x.png" />
										<span class="pop-item">独立卫浴</span>
									</div>
									<div class="">
										<img width="12" class="pop-icon" src="../styles/images/detail/people.png" />
										<span class="pop-item">可住2人</span>
									</div>
								</li>
								<li class="pop-floor">
									<div class="">
										<img width="12" class="pop-icon" src="../styles/images/detail/floor.png" />
										<span class="pop-item">12层</span>
									</div>
									<div class="">
										<img width="12" class="pop-icon" src="../styles/images/detail/sex.png" />
										<span class="pop-item">情趣用品</span>
									</div>
									<div class="">
										<img width="12" class="pop-icon" src="../styles/images/detail/icon_romantic.png@2x.png" />
										<span class="pop-item">浪漫氛围</span>
									</div>
								</li>
							</ul>
						</li>
						<li class="pop-cancel">
							<span class="title">取消扣款</span>
							<span class="content">订单支付后，取消将会扣款</span>
						</li>
						<li class="pop-oversea">
							<span class="title">外来</span>
							<span class="content">可接待外宾入住，入住人需要持有效护照及签证证件入住</span>
						</li>
						<li class="pop-recommend">
							<span class="title">酒店评分</span>
							<span class="content">
								<span style="font-size: 1.4rem;color: #e61874;">4.9分</span><span style="font-size: 1.4rem;">/</span> 5分&nbsp;
							<span style="color:#e61874;">优于同行</span>
							</span>
						</li>
					</ul>
				</div>
				<div class="pop-foot">
					<div class="pop-price">
						<span>在线付款￥<span class="price" style="font-size: 1.8rem;">330</span></span>
						<span class="price-fan"><span>立减￥</span><span class="cashback">23</span></span>
					</div>
					<div class="submit on-submit">立即预定</div>
				</div>
			</div>
		</div>
		<!-- 含早弹出框--结束 -->
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				// 预加载填写订单页
				preloadPages: [{
					id: 'fill-in-order.html',
					url: 'fill-in-order.html'
				}],
				swipeBack: true //启用右滑关闭功能
			});

			// 入住离店日期以上部分的数据渲染
			var topTitle = document.getElementById("top-title");
			var conTitle = document.getElementsByClassName("con-title");
			var headimg = document.getElementById("head-img"); // 从列表页传过来的酒店图片
			var picNum = document.getElementById("picNum"); // 该酒店总共有几张图片
			var hotelScore = document.getElementById("score"); // 酒店评分
			var address = document.getElementById("address"); // 获取酒店的地理位置
			var dateWrap = document.getElementById("date-wrap"); // 获取日期栏
			var itemBed; // 房型
			var breakfast; // 是否含早
			var price; // 酒店价格
			var cashback; // 立减金额
			var hotelid;
			var roomtypeid;
			var rateplanid;
			var startTime;
			var endTime;
			var datanum;
			var st;
			var et;
			var hotelName;

			//多少晚
			function getTime2Time($time1, $time2) {
				var time1 = arguments[0],
					time2 = arguments[1];
				time1 = Date.parse(time1) / 1000;
				time2 = Date.parse(time2) / 1000;
				var time_ = time1 - time2;
				return(time_ / (3600 * 24));
			}

			// 监听日历页的chdID事件
			window.addEventListener('chdID', function(event) {
//				console.log("能监听到");
				var datehtml = '';
				startTime = event.detail.depDate;
				endTime = event.detail.endDate;
//				console.log(startTime);
				var start = startTime.split("-");
				var end = endTime.split("-");
				// 计算天数
				var num = getTime2Time(endTime, startTime);
				datanum = num;

				// 入住及离店时间
				datehtml += '<span class="date-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span id="startTime">' + start[1] + '月' + start[2] + '日</span></span>';
				datehtml += '<span class="date-stay">共' + num + '晚</span>';
				datehtml += '<span class="date-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span id="endTime">' + end[1] + '月' + end[2] + '日</span></span>';
				dateWrap.innerHTML = datehtml; // 入住及离店时间
				st = document.getElementById("startTime").innerHTML;
				et = document.getElementById("endTime").innerHTML;
			});

			// 添加hdID自定义事件监听
			window.addEventListener('hdID', function(event) {
				// 获得事件参数
				hotelid = event.detail.id;
				var src = event.detail.src;
				var score = event.detail.score; // 酒店评分
				var distance = event.detail.distance;
				headimg.setAttribute('src', src); // 详情页的展示图片是从列表项传过来的图片
				conTitle[0].setAttribute('id', hotelid);
				var datehtml = '';
				var scorehtml = ''
				var dataObj = JSON.parse(localStorage.getItem('data'));
				// console.log("缓存里的数据：" + JSON.stringify(dataObj));
				mui.ajax('http://www.aiai.com/api/hoteldetail', {
					data: {
						hotelid: hotelid
					},
					dataType: 'json',
					type: 'get',
					success: function(data) {
						var telnum = document.getElementsByClassName("telephone");
						for(var i = 0; i < telnum.length; i++) {
							telnum[i].setAttribute('href', "tel://" + data.telephone);
						}
						// console.log(JSON.stringify(data));
						var introduceData = JSON.stringify(data);
						localStorage.setItem('introduceData', introduceData);
						picNum.innerHTML = data.pic.length + "张"; // 酒店图片总数
						topTitle.innerHTML = conTitle[0].innerHTML = data.hotelchnname; // 酒店名称
						hotelName = topTitle.innerHTML;
						address.innerHTML = data.chnaddress + "，" + distance; // 酒店地址已经与当前位置的距离

						// 酒店评分
						scorehtml += '<div class="score-item">';
						scorehtml += '<span class="font24">4.8</span><span class="font16">分</span></div>'; //' + data.commentscore + '
						if(data.commentscore >= 3 && data.commentscore < 4.0) {
							scoreText = "一般";
						} else if(data.commentscore >= 4.0 && data.commentscore < 4.5) {
							scoreText = "不错";
						} else if(data.commentscore >= 4.5 && data.commentscore < 4.8) {
							scoreText = "很好";
						} else if(data.commentscore >= 4.8 && data.commentscore < 5) {
							scoreText = "非常棒";
						} else {
							scoreText = "完美";
						}
						scorehtml += '<span>' + scoreText + '</span></span>';
						hotelScore.innerHTML = scorehtml; // 酒店评分

						// 房型函数
						roomtype();
					}
				});

				// 入住及离店时间
				datehtml += '<span class="date-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span id="startTime">' + dataObj.startM + '月' + dataObj.startD + '日</span></span>';
				datehtml += '<span class="date-stay">共' + dataObj.datanum + '晚</span>';
				datehtml += '<span class="date-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span id="endTime">' + dataObj.endM + '月' + dataObj.endD + '日</span></span>';
				dateWrap.innerHTML = datehtml; // 入住及离店时间
				st = document.getElementById("startTime").innerHTML;
				datanum = dataObj.datanum;
				et = document.getElementById("endTime").innerHTML;
			});

			//获取酒店数据
			function roomtype() {
				var roomType = document.getElementById("room-type");
				var middlePopover = document.getElementById("middlePopover");
				var score = parseFloat(hotelScore.children[0].children[0].innerHTML);
				var roomHtml = '';
				var middlePopoverHtml = '';
				var hid = conTitle[0].getAttribute('id');
				mui.ajax('http://www.aiai.com/api/roomtype', {
					data: {
						hotelid: hid
					},
					dataType: 'json',
					type: 'get',
					success: function(data) {
						console.log("返回房型数据：" + JSON.stringify(data));
						for(var i = 0; i < data.length; i++) {
							roomHtml += '<ul class="mui-table-view">';
							roomHtml += '<li class="mui-table-view-cell mui-collapse">';
							roomHtml += '<a class="mui-navigate-right" href="#">';
							roomHtml += '<div class="hotel-list">';
							roomHtml += '<div class="hotel-list-img">';
							roomHtml += '<img src="../styles/images/avatar-icon1.png" />';
							roomHtml += '</div>';
							roomHtml += '<div class="mui-table-view-cell__bd">';
							roomHtml += '<h1 class="info-title">' + data[i].roomtypename + '</h1>';
							roomHtml += '<div class="font12 bed-size">' + data[i].roomacreage + '㎡&nbsp;&nbsp;' + data[i].bedtype + '</div>';
							//							if(data[i].hasnet == '' || data[i].hasnet == null) {
							//								roomHtml += '<div class="font12">';
							//							} else {
							//								roomHtml += '<div class="font12">免费wifi&nbsp;&nbsp;' + data[i].hasnet + '宽带</div></div>';
							//							}
							roomHtml += '<div class="font12">免费wifi&nbsp;&nbsp;' + data[i].hasnet + '宽带</div></div>';
							roomHtml += '</div>';
							roomHtml += '</div>';
							roomHtml += '</a>';
							roomHtml += '<div class="mui-collapse-content">';
							roomHtml += '<div class="mui-input-group">';
							roomHtml += '<ul class="hotel-list__child">';
							roomHtml += '<li  id="hotel-item" class="mui-table-view-cell flex hotel-item">';
							roomHtml += '<div class="mui-table-view-cell__bd">';
							roomHtml += '<a href="#middlePopover" class="column">';
							roomHtml += '<span class="item-bed" id="' + data[i].rateplanid + '">' + data[i].bedtype + '</span>';
							//							if(data[i].breakfasttype == 0) {
							//								roomHtml += '<span class="item-breakfast">无早</span></a></div>';
							//							} else {
							//								roomHtml += '<span class="item-breakfast">含单早</span></a></div>';
							//							}
							roomHtml += '<span class="item-breakfast">' + data[i].rateplanname + '</span></a></div>';
							roomHtml += '<div class="column price-wrap">';
							roomHtml += '<span class="price-item"><span class="font10">￥</span><span class="price" style="font-size: 1.4rem;">' + data[i].price + '</span></span>';
							roomHtml += '<span class="font10">立减￥<span class="cashback">22</span></span></div>';
							if(data[i].roomnumsale == 0) {
								roomHtml += '<img class="icon-img" src="../styles/images/detail/btn_booking_projection_gray.png@2x.png"/>';
							} else {
								roomHtml += '<img class="icon-img on-icon" id="' + data[i].roomtypeid + '" src="../styles/images/detail/btn_booking_projection.png@2x.png"/>';
							}
							roomHtml += '</li></ul></div></div></li></ul>';

							// 弹出框
							middlePopoverHtml += '<div class="mui-scroll-wrapper"><div class="mui-scroll">';
							middlePopoverHtml += '<h1 class="pop-type">' + data[i].bedtype + '</h1>';
							middlePopoverHtml += '<ul class="popover-wrap"><li class="pop-bed"><img width="12" class="pop-icon" src="../styles/images/detail/bed.png" />';
							middlePopoverHtml += '<span class="pop-item">大床1.8m | 建筑面积' + data[i].roomacreage + '㎡</span>';
							middlePopoverHtml += '</li><li class="pop-deploy"><ul><li class="pop-wifi"><div class="">';
							middlePopoverHtml += '<img width="12" class="pop-icon" src="../styles/images/detail/wifi.png" />';
							if(data[i].hasnet == '' || data[i].hasnet == null) {
								middlePopoverHtml += '<span class="pop-item">无wifi</span></div><div class="">';
							} else {
								middlePopoverHtml += '<span class="pop-item">有wifi</span></div><div class="">';
							}

							middlePopoverHtml += '<img width="12" class="pop-icon" src="../styles/images/detail/icon_bathroom.png@2x.png" />';
							middlePopoverHtml += '<span class="pop-item">独立卫浴</span>';
							middlePopoverHtml += '</div><div class=""><img width="12" class="pop-icon" src="../styles/images/detail/people.png" />';
							middlePopoverHtml += '<span class="pop-item">可住' + data[i].maxnumofpersons + '人</span>';
							middlePopoverHtml += '</div></li><li class="pop-floor"><div class=""><img width="12" class="pop-icon" src="../styles/images/detail/floor.png" />';
							middlePopoverHtml += '<span class="pop-item">' + data[i].roomfloor + '层</span></div><div class=""><img width="12" class="pop-icon" src="../styles/images/detail/sex.png" />';
							middlePopoverHtml += '<span class="pop-item">情趣用品</span></div><div class=""><img width="12" class="pop-icon" src="../styles/images/detail/icon_romantic.png@2x.png" />';
							middlePopoverHtml += '<span class="pop-item">浪漫氛围</span></div></li></ul></li>';
							middlePopoverHtml += '<li class="pop-cancel">';
							middlePopoverHtml += '<span class="title">取消扣款</span>';
							middlePopoverHtml += '<span class="content">订单支付后，取消将会扣款</span></li>';
							middlePopoverHtml += '<li class="pop-oversea">';
							middlePopoverHtml += '<span class="title">外来</span>';
							middlePopoverHtml += '<span class="content">可接待外宾入住，入住人需要持有效护照及签证证件入住</span></li>';
							middlePopoverHtml += '<li class="pop-recommend">';
							middlePopoverHtml += '<span class="title">酒店评分</span>';
							middlePopoverHtml += '<span class="content">';
							middlePopoverHtml += '<span style="font-size: 1.4rem;color: #e61874;">4.8分</span><span style="font-size: 1.4rem;">/</span> 5分&nbsp;'; //' + score + '
							if(score >= 4.8) {
								middlePopoverHtml += '<span style="color:#e61874;">优于同行</span></span></li></ul></div>';
							} else {
								middlePopoverHtml += '<span style="color:#e61874;"></span></span></li></ul></div>';
							}
							middlePopoverHtml += '<div class="pop-foot"><div class="pop-price" id="' + data[i].rateplanid + '">';
							middlePopoverHtml += '<span>在线预付￥<span class="price" style="font-size: 1.8rem;">' + data[i].saleprice + '</span></span>';
							middlePopoverHtml += '<span class="price-fan"><span>立减￥</span><span class="cashback">22</span></span></div>';
							if(data[i].roomnumsale == 0) {
								middlePopoverHtml += '<div class="submit" style="background-color:#999;">立即预定</div></div></div>';
							} else {
								middlePopoverHtml += '<div class="submit on-submit" id="' + data[i].roomtypeid + '">立即预定</div></div></div>';
							}

						}

						roomType.innerHTML = roomHtml; // 渲染房型
						middlePopover.innerHTML = middlePopoverHtml; // 弹出框

						itemBed = document.getElementsByClassName("item-bed")[0].innerHTML; // 房型
						breakfast = document.getElementsByClassName("item-breakfast")[0].innerHTML; // 是否含早
						cashback = document.getElementsByClassName("cashback")[0].innerHTML; // 立减金额
					}
				});
			};

			// 向填写订单页传值
			var fillInOrderPage = null;

			// 添加填写订单页的点击事件 ，通过预定图片打开填写订单页
			mui('#room-type').on('tap', '.on-icon', function(event) {
				roomtypeid = this.getAttribute('id'); // 获取房间类型id
				rateplanid = this.parentNode.children[0].children[0].children[0].getAttribute('id'); // 配额房id
				var parentNode = this.parentNode.children[1];
				price = parentNode.children[0].children[1].innerHTML;
				cashback = parentNode.children[1].children[0].innerHTML;
				
				// 获得酒店详情页
				if(!fillInOrderPage) {
					fillInOrderPage = plus.webview.getWebviewById("fill-in-order.html");
				}

				mui.fire(fillInOrderPage, 'fioId', {
					hotelid: hotelid,
					roomtypeid: roomtypeid,
					rateplanid: rateplanid,
					topTitle: hotelName,
					itemBed: itemBed,
					breakfast: breakfast,
					price: price,
					cashback: cashback,
					st: st,
					datanum: datanum,
					et: et
				});

				// 打开填写订单页面
				mui.openWindow({
					id: 'fill-in-order.html',
					show: {
						autoShow: true
					}
				});
			});

			
			// 添加填写订单页的点击事件 ，通过立即预定打开填写订单页
			mui('#middlePopover').on('tap', '.on-submit', function(event) {
				roomtypeid = this.getAttribute('id'); // 获取房间类型id
				var parentNode = this.parentNode.children[0];
				rateplanid = parentNode.getAttribute('id');
				price = parentNode.children[0].children[0].innerHTML; // 房间价格
				cashback = parentNode.children[1].children[1].innerHTML; // 立减金额
				// 获得酒店详情页
				if(!fillInOrderPage) {
					fillInOrderPage = plus.webview.getWebviewById("fill-in-order.html");
				}

				mui.fire(fillInOrderPage, 'fioId', {
					hotelid: hotelid,
					roomtypeid: roomtypeid,
					rateplanid: rateplanid,
					topTitle: hotelName,
					itemBed: itemBed,
					breakfast: breakfast,
					price: price,
					cashback: cashback,
					st: st,
					datanum: datanum,
					et: et
				});

				// 打开填写订单页面
				mui.openWindow({
					id: 'fill-in-order.html',
					show: {
						autoShow: true
					}
				});
			});

			// 根据滚动条变化的头部导航栏
			window.onscroll = function() {
				var sHeight = document.documentElement.scrollTop || document.body.scrollTop;
				var header = document.getElementById("header");
				var header2 = document.getElementById("header2");
				if(sHeight > 80) {
					conTitle[0].style.display = "none";
					topTitle.style.display = "block";
					header.style.display = "none";
					header2.style.display = "block";
				} else {
					conTitle[0].style.display = "block";
					topTitle.style.display = "none";
					header.style.display = "block";
					header2.style.display = "none";
				}
			}

			// 收藏与否
			var collect = document.getElementsByClassName("collect");
			var statu = false;
			for(var i = 0; i < collect.length; i++) {
				collect[i].addEventListener('tap', function(e) {
					statu = !statu;
					// console.log(statu);
					// return statu;
				});
			}

			var openCalendar = document.getElementById("openCalendar");
			openCalendar.addEventListener('tap', function() {
				console.log("在酒店详情页点击日历");
				localStorage.removeItem('index');
				localStorage.setItem('index', 2);
				var index = localStorage.getItem('index');
				//				console.log("详情页:" + index);
				// 打开日历页面
				mui.openWindow({
					url: 'calendar.html',
					id: 'calendar.html',
					show: {
						autoShow: true
					}
				});
			});
			
			mui.plusReady(function() {
			
			});
		</script>
	</body>

</html>